<page-header />
<div nz-row>
  <!-- 组 -->
  <div nz-col nzSpan="8">
    <nz-card nzTitle="用户组" [nzExtra]="groupTemplate">
      <div class="mb-md">
        <input nz-input [(ngModel)]="groupParams.name" name="name" placeholder="请输入名称" style="width: 200px" class="mr-sm" />
        <button nz-button (click)="queryGroup(null)">搜索</button>
        <button nz-button (click)="resetGroup()">重置</button>
      </div>
      <st
        #group
        [data]="groupPage.records"
        [pi]="groupPage.current"
        [ps]="groupPage.size"
        [total]="groupPage.total"
        [page]="groupPagination"
        [columns]="groupColumns"
        (change)="groupChange($event)"
      />
    </nz-card>
    <ng-template #groupTemplate>
      <button nz-button [nzType]="'primary'" (click)="addGroup()">添加组</button>
    </ng-template>
  </div>
  <!-- 用户 -->
  <div nz-col nzSpan="15" style="margin-left: 10px">
    <nz-card nzTitle="{{ currentGroup.name }}组用户" [nzExtra]="userTemplate">
      <div class="mb-md">
        <input nz-input [(ngModel)]="userParams.account" name="account" placeholder="请输入用户名" style="width: 200px" class="mr-sm" />
        <input nz-input [(ngModel)]="userParams.name" name="name" placeholder="请输入姓名" style="width: 200px" class="mr-sm" />
        <button nz-button (click)="queryUser(null)">搜索</button>
        <button nz-button (click)="resetUser()">重置</button>
      </div>
      <st
        #user
        [data]="userPage.records"
        [pi]="userPage.current"
        [ps]="userPage.size"
        [total]="userPage.total"
        [page]="userPagination"
        [columns]="userColumns"
      >
        <ng-template st-row="groupName" let-item>
          @for (group of item.groupName; track $index) {
            <nz-tag [nzColor]="'#108ee9'">{{ group }}</nz-tag>
          }
        </ng-template>
      </st>
    </nz-card>
    <ng-template #userTemplate>
      <button nz-button [nzType]="'primary'" (click)="addUser()">添加用户</button>
    </ng-template>
  </div>
</div>
